<template>
    <div
        :class="isOpen ? 'w-1/6' : 'w-0'"
        class="transition-all duration-300 sticky top-0 flex-col justify-between"
    >
        <div class="flex flex-col bg-white rounded-r-xl shadow-xl h-screen items-center relative">
            <div
                :class="isOpen ? 'scale-100 ' : 'scale-0'"
                class="text-md p-4 text-green-700 font-bold flex flex-row items-center gap-2 origin-center transition-all duration-300"
            >
                <svg
                    t="1646649249013"
                    class="icon w-8 h-8"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="4885"
                >
                    <path
                        d="M197.48 833.07c-12.5-12.5-12.5-32.76 0-45.25l32.46-32.46 45.25 45.25-32.46 32.46c-12.49 12.5-32.75 12.5-45.25 0z"
                        fill="#95BD65"
                        p-id="4886"
                    />
                    <path
                        d="M557.85 693.26C395.39 855.72 297.3 840.01 241.06 783.77c-56.24-56.24-71.95-154.33 90.51-316.78s429.92-339.41 497.8-271.53-109.06 335.35-271.52 497.8z"
                        fill="#FAD757"
                        p-id="4887"
                    />
                    <path
                        d="M762.4 505.3c7.12 2.18 7.73 12.19 0.9 15.16-23.66 10.27-85.42 52.78-114.94 82.3l-172.8 172.8c-54.12 54.12-139 69.81-204.92 30.91-60.88-35.92-85.02-103.01-29.57-158.46C415.59 473.48 569.09 446.19 762.4 505.3z"
                        fill="#5D985B"
                        p-id="4888"
                    />
                    <path
                        d="M519.54 262.44c-2.18-7.12-12.19-7.73-15.16-0.9-10.27 23.66-52.78 85.42-82.3 114.94l-172.8 172.8c-54.12 54.12-69.81 139-30.91 204.92 35.92 60.88 103.01 85.02 158.46 29.57 174.53-174.53 201.82-328.02 142.71-521.33z"
                        fill="#95BD65"
                        p-id="4889"
                    />
                </svg>
                <div>CAU Manager</div>
            </div>
            <button
                @click="isOpen = !isOpen"
                :class="isOpen ? 'border-gray-200' : 'border-green-700 hover:translate-x-2'"
                class="z-10 hover:scale-125 absolute -right-4 top-1/2 rounded-full border-2 bg-white w-8 h-8 transition-all duration-300"
            >
                <svg
                    :class="isOpen ? 'block' : 'hidden'"
                    xmlns="http://www.w3.org/2000/svg"
                    class="m-2 text-green-700"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    stroke-width="2"
                >
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
                </svg>
                <svg
                    :class="!isOpen ? 'block' : 'hidden'"
                    xmlns="http://www.w3.org/2000/svg"
                    class="m-2 text-green-700"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    stroke-width="2"
                >
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                </svg>
            </button>
            <div
                :class="isOpen ? 'scale-100' : 'scale-0'"
                class="py-2 m-2 w-full text-center cursor-pointer transition-all duration-300"
                v-for="(link, i) in links"
                @click="changeSelect(i)"
            >
                <div
                    :class="selected === i ? 'bg-green-700 text-white' : 'bg-white'"
                    class="font-bold transition-all w-full duration-200 py-2 flex gap-2 items-center justify-center"
                >
                    <img
                        v-if="i === 0"
                        src="../assets/desk.svg"
                        class="w-9 h-9 bg-white rounded-full p-2"
                    />
                    <img
                        v-if="i === 1"
                        src="../assets/star.svg"
                        class="w-9 h-9 bg-white rounded-full p-2"
                    />
                    <img
                        v-if="i === 2"
                        src="../assets/diploma.svg"
                        class="w-9 h-9 bg-white rounded-full p-2"
                    />
                    <img
                        v-if="i === 3"
                        src="../assets/exam.svg"
                        class="w-9 h-9 bg-white rounded-full p-2"
                    />
                    {{ link.text }}
                </div>
                <div :class="selected === i ? ' h-48' : 'h-0'" class="transition-all duration-200">
                    <div
                        v-for="item in link.menu"
                        :class="selected === i ? 'block scale-100' : 'hidden scale-0'"
                        class="p-2 w-full text-sm hover:bg-yellow-100 hover:text-yellow-700"
                    >{{ item }}</div>
                </div>
            </div>
            <div
                :class="isOpen ? 'block' : 'hidden'"
                class="flex absolute bottom-6 left-6 cursor-pointer font-light gap-2 items-center"
            >
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="h-6 w-6"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    stroke-width="2"
                >
                    <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                    />
                </svg>Help
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
const isOpen = ref(true)
const selected = ref(-1)
const changeSelect = (i) =>{
    if(i === selected.value)selected.value = -1
    else selected.value = i
}
const links = ref([{
    text: '我的桌面', menu: ['公告留言',
        '个人信息',
        '在线问答',
        '教学周历',
        '文档管理',
    ]
}, {
    text: '学籍成绩', menu: ['学籍管理',
        '毕业管理',
        '我的成绩',
        '可信证明生成',
    ]
}, {
    text: '培养管理', menu: [
        '培养方案',
        '我的课表',
        '选课管理',
        '教材管理',

    ]
}, {
    text: '考试报名', menu: [
        '我的考试',
        '成绩管理',

    ]
}])
</script>